<template>
    <my-card>
        <div v-if="disable" class="card-mask">
            <a-icon type="loading" style="font-size: 40px"/>
        </div>
        <div class="my-title-box">
            <a-skeleton active :loading="!title" :title="{width:'26%'}"
                        :paragraph="false">
                <div class="my-title">
                    <div style="font-size: 18px;color:#3E3F42">
                        {{title}}
                    </div>
                    <slot name="actions"/>
                </div>
            </a-skeleton>
        </div>
        <slot></slot>
    </my-card>
</template>

<script>
    export default {
        name: 'CardHasTitle',
        props: {
            disable: {
                type: Boolean,
                default: false,
            },
            title: {
                type: String,
                required: true,
            },
        },
        data () {
            return {};
        },
    };
</script>

<style scoped>
    .card-mask {
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.6);
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9;
        top: 0;
        left: 0;
    }
    .my-title-box {
        height: 74px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 30px;
        border-bottom: 1px solid #EAEDF3;
    }

    .my-title {
        height: 74px;
        width: 100%;
        display: flex;
        flex-direction: row;
        font-weight: 500;
        align-items: center;
        justify-content: space-between;
    }
</style>
